import "./record.scss"
import { useEffect } from "react"
import { Tabs } from 'antd-mobile'
import React, { useState } from 'react'
import { getRecordsApi } from "@/api/modules/record"
import { Card } from 'antd-mobile'

function Record() {
    const [data, setData] = useState([])
    useEffect(() => {
        getRecordsApi({
            type: "finish"
        }).then(res => {
            if (res.code == 0) {
                setData(res.data)
            }
        })
    }, [])
    const en2cn = (type) => {
        if (type == "finish") {
            return "已通过"
        }
        else if (type == "undo") {
            return "待审核"
        }
        else {
            return "未通过"
        }
    }
    const changeHandler = (key) => {
        getRecordsApi({
            type: key
        }).then(res => {
            if (res.code == 0) {
                setData(res.data)
            }
        })
    }
    return (
        <div className="record">
            <Tabs onChange={changeHandler} defaultActiveKey="finish">
                <Tabs.Tab title='已通过' key='finish' />
                <Tabs.Tab title='待审核' key='undo' />
                <Tabs.Tab title='未通过' key='fail' />
            </Tabs>
            {data.length > 0 && data.map(item => (
                <Card key={item.id}
                    title={
                        <div style={{ fontWeight: 'normal' }}>
                            <span className="time">
                                创建时间：{item.time}
                            </span>
                            <span className="type">
                                {en2cn(item.type)}
                            </span>
                        </div>
                    }
                >
                    <div className="content">
                        <div>用户名：{item.name}</div>
                        <div>商&emsp;品：{item.goods.map(item1 => (
                            <span key={item1}>{item1}&emsp;</span>
                        ))}</div>
                        <div className="money">
                            <span>金&emsp;额：{item.money}&emsp;佣金：{Math.round(item.money * 0.1)}</span>
                        </div>
                    </div>
                    <div className="footer">
                        等待管理员审核，审核通过后，佣金将结算至账户
                    </div>
                </Card>
            ))}
        </div>
    )
}

export default Record